<!-- <page-header autoTitle="false"> </page-header> -->

<div nz-row nzGutter="24">
  <div nz-col [nzSpan]="6" class="customer-col">
    <div class="customer-tree-head">
      <div class="customer-tree-head-wapper">
        <div class="customer-tree-head-title">
          <nz-select style="width: 85%" [(ngModel)]="currentWsId" (ngModelChange)="queryNodeTree()">
            <nz-option *ngFor="let item of workspaces" [nzValue]="item.id" [nzLabel]="item.label" />
          </nz-select>
        </div>
        <div class="customer-tree-extra">
          <nz-button-group>
            <button nz-button nzType="primary" (click)="queryNodeTree()" [nzLoading]="isLoading">
              <i nz-icon nzType="sync"></i>
            </button>
            <button nz-button nzType="primary" nz-dropdown [nzDropdownMenu]="menu">
              ...
              <!-- <i nz-icon nzType="right"></i> -->
            </button>
          </nz-button-group>

          <nz-dropdown-menu #menu="nzDropdownMenu">
            <ul nz-menu>
              <li nz-submenu nzTitle="新建节点">
                <ul>
                  <li nz-menu-item>
                    <button nz-button nzType="text" (click)="addRootNode(modalContent)">新建根节点</button>
                  </li>
                  <li nz-menu-item>
                    <button nz-button nzType="text" (click)="addFolderNode(modalContent)">新建子节点 </button>
                  </li>
                </ul>
              </li>
              <li nz-menu-divider></li>
              <li nz-submenu nzTitle="从外部导入">
                <ul>
                  <li nz-menu-item>
                    <button nz-button nzType="text" (click)="importFromMetaTable(cloneModalContent)">从元数据导入 </button>
                  </li>
                  <li nz-menu-item>
                    <button nz-button nzType="text" (click)="selectTableFromDataBase()">从数据库导入</button>
                  </li>
                  <li nz-menu-item>
                    <button nz-button nzType="text" (click)="importExcelData()">从Excel导入</button>
                  </li>
                  <li nz-menu-item>
                    <button nz-button nzType="text" (click)="navUploadLogView()">excel导入历史记录</button>
                  </li>
                  <li nz-menu-item>
                    <button nz-button nzType="text" (click)="downloadExcelTemplate()">excel模版下载</button>
                  </li>
                </ul>
              </li>
              <li nz-menu-divider></li>
              <li nz-submenu nzTitle="生成代码">
                <ul>
                  <li nz-menu-item>
                    <button nz-button nzType="text" (click)="openDbScript()">查看表脚本</button>
                  </li>
                  <li nz-menu-item>
                    <button nz-button nzType="text" (click)="openJpaScript()">查看JPA代码</button>
                  </li>
                  <li nz-menu-item>
                    <button nz-button nzType="text" (click)="navigateDbScript()">跳转表脚本</button>
                  </li>
                  <li nz-menu-item>
                    <button nz-button nzType="text" (click)="navigateJpaScript()">跳转JPA代码</button>
                  </li>
                </ul>
              </li>
              <li nz-menu-divider></li>
              <li nz-menu-item>
                <button nz-button nzType="text" (click)="addTableNode(modalContent)">新建表 </button>
              </li>
              <li nz-menu-item>
                <button nz-button nzType="text" (click)="renameNode(modalContent)">重命名</button>
              </li>
              <li nz-menu-item>
                <button nz-button nzType="text" (click)="deleteNode()">删除 </button>
              </li>
            </ul>
          </nz-dropdown-menu>
        </div>
      </div>
    </div>
    <nz-input-group [nzSuffix]="suffixIcon" style="margin-top: 5px; width: 100%" nzSize="small">
      <input type="text" nz-input placeholder="Search" [(ngModel)]="searchTreeValue" />
    </nz-input-group>
    <ng-template #suffixIcon>
      <i nz-icon nzType="search"></i>
    </ng-template>
    <div [ngStyle]="currentClasses">
      <nz-tree
        #nzTreeComponent
        style="margin-top: 8px"
        [nzData]="nodeTree"
        [nzSearchValue]="searchTreeValue"
        (nzClick)="treeNodeClick($event)"
        (nzDblClick)="treeNodeDbClick($event)"
        nzDraggable
        nzBlockNode
        (nzOnDrop)="nzDropNode($event)"
        nzShowIcon
        [nzTreeTemplate]="nzTreeTemplate"
      />
      <ng-template #nzTreeTemplate let-node let-origin="origin">
        <span class="custom-node">
          <span *ngIf="node.origin.type == 'folder'" (contextmenu)="treeContextMenu($event, treeMenu)">
            <span nz-icon nzTheme="fill" [nzType]="node.isExpanded ? 'folder-open' : 'folder'"></span>
            <span class="file-name"> {{ node.title }}</span>
          </span>
          <span *ngIf="node.origin.type === 'table'" (contextmenu)="treeContextMenu($event, treeMenu)">
            <span nz-icon nzType="table"></span>
            <span class="file-name"> {{ node.title }}</span>
          </span>
        </span>
      </ng-template>
      <nz-dropdown-menu #treeMenu="nzDropdownMenu">
        <ul nz-menu>
          <li nz-menu-item (click)="queryTableInfo()">加载表</li>
          <li nz-menu-item (click)="renameNode(modalContent)">重命名</li>
          <li nz-menu-item (click)="deleteNode()">删除</li>
        </ul>
      </nz-dropdown-menu>
    </div>
  </div>

  <div nz-col [nzSpan]="18" class="customer-col">
    <div class="customer-tree-head">
      <div class="customer-tree-head-wapper">
        <div class="customer-tree-head-title">表设计</div>
        <div class="customer-tree-extra">
          <a nz-button nzType="default" nzSize="default" (click)="queryTableInfo()"><i nz-icon nzType="reload"></i>加载表</a>
          <nz-divider nzType="vertical" />

          <a nz-button nzType="default" nzSize="default" (click)="openDbScript()">查看表脚本</a>
          <a nz-button nzType="default" nzSize="default" (click)="openJpaScript()">查看JPA代码</a>
          <nz-divider nzType="vertical" />
          <a nz-button nzType="primary" nzSize="default" (click)="saveTableInfo()"><i nz-icon nzType="save"></i>保存</a>
        </div>
      </div>
    </div>
    <div [ngStyle]="currentClasses">
      <form nz-form [formGroup]="tableInfoForm" style="padding-right: 15px; margin-top: 8px">
        <nz-form-item style="margin-bottom: 12px">
          <nz-form-label [nzSm]="2" nzFor="tableName" nzRequired>表名</nz-form-label>
          <nz-form-control nzErrorTip="Please input your tableName">
            <input formControlName="tableName" nz-input placeholder="" />
          </nz-form-control>
          <nz-form-label [nzSm]="2" nzFor="tableComment" nzRequired>中文名</nz-form-label>
          <nz-form-control nzErrorTip="Please input your tableComment!">
            <input formControlName="tableComment" nz-input placeholder="" />
          </nz-form-control>
        </nz-form-item>
        <nz-form-item style="margin-bottom: 12px">
          <nz-form-label [nzSm]="2" nzFor="tableComment">备注</nz-form-label>
          <nz-form-control nzSpan="24" nzErrorTip="Please input your tableComment!">
            <input formControlName="remark" nz-input placeholder="" />
          </nz-form-control>
        </nz-form-item>
        <nz-form-item style="margin-bottom: 12px">
          <nz-form-label [nzSm]="3" nzFor="sourceType">来源类型</nz-form-label>
          <nz-form-control nzErrorTip="Please input your sourceType">
            <input formControlName="sourceType" nz-input placeholder="" />
          </nz-form-control>
          <nz-form-label [nzSm]="3" nzFor="sourceName">来源名称</nz-form-label>
          <nz-form-control nzErrorTip="Please input your sourceName!">
            <input formControlName="sourceName" nz-input placeholder="" />
          </nz-form-control>
          <nz-form-label [nzSm]="3" nzFor="sourceTable">来源对象</nz-form-label>
          <nz-form-control nzErrorTip="Please input your sourceTable!">
            <input formControlName="sourceTable" nz-input placeholder="" />
          </nz-form-control>
        </nz-form-item>
        <div style="float: right; margin-right: 40px" class="d-flex pt-sm">
          @if (isUpdateTableColumn()) {
            <button nz-button (click)="updateTableColumnFromDataBase()" nzType="default" nzShape="round">
              <span nz-icon nzType="code" nzTheme="outline"></span>
              更新列</button
            >
          }
          <button nz-button (click)="openDrawer(0)" nzType="default" nzShape="round">
            <span nz-icon nzType="console-sql" nzTheme="outline"></span>
            SQL导入</button
          >
          <button nz-button (click)="openDrawer(1)" nzType="default" nzShape="round"
            ><span nz-icon nzType="file-text"></span>JSON导入</button
          >
          <button nz-button nz-dropdown nzShape="round" nzType="default" [nzDropdownMenu]="excelColmenu">
            Excel导入
            <span nz-icon nzType="down"></span>
          </button>
          <nz-dropdown-menu #excelColmenu="nzDropdownMenu">
            <ul nz-menu>
              <li nz-menu-item>
                <input type="file" (change)="importColumnList($event)" multiple="false" class="ml-sm" />
              </li>
              <li nz-menu-item>
                <button nz-button nzType="text" (click)="exportColumnList()">excel导出</button>
              </li>
              <li nz-menu-item>
                <button nz-button nzType="text" (click)="exportColumnTemplate()">下载模版</button>
              </li>
            </ul>
          </nz-dropdown-menu>
        </div>
        <nz-divider nzText="字段设计" nzOrientation="left" />
        <nz-table formArrayName="columns" nzSize="small" [nzData]="columns.value" [nzShowPagination]="false">
          <thead>
            <tr>
              <th nzWidth="22%" nzShowSort="true" nzShowFilter="true">字段英文名</th>
              <th nzWidth="23%">字段中文名</th>
              <th nzWidth="15%">数据类型</th>
              <th nzWidth="5%">长度</th>
              <th nzWidth="5%">刻度</th>
              <th nzWidth="5%" nzAlign="center">可空</th>
              <th nzWidth="15%">默认值</th>
              <th nzWidth="10%">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of columns.controls; let i = index" [formGroupName]="i">
              <ng-container *ngIf="columnIndex == i; else columnEditTemplate">
                <td>
                  <nz-form-item>
                    <nz-form-control nzErrorTip="请输入字段英中文名">
                      <input nz-input formControlName="columnName" placeholder="请输入字段英中文名" />
                    </nz-form-control>
                  </nz-form-item>
                </td>
                <td>
                  <nz-form-item>
                    <nz-form-control nzErrorTip="请输入字段中文名">
                      <input nz-input formControlName="columnComment" placeholder="请输入字段中文名" />
                    </nz-form-control>
                  </nz-form-item>
                </td>
                <td>
                  <nz-form-item>
                    <nz-form-control nzErrorTip="请输入数据类型">
                      <nz-select formControlName="dataType" name="dataType" nzPlaceHolder="请输入数据类型" nzShowSearch>
                        <nz-option *ngFor="let item of dataTypes" [nzLabel]="item" [nzValue]="item" />
                      </nz-select>
                    </nz-form-control>
                  </nz-form-item>
                </td>
                <td>
                  <nz-form-item>
                    <nz-form-control nzErrorTip="请输入长度">
                      <nz-input-number nz-input [nzMin]="1" formControlName="length" placeholder="请输入长度" />
                    </nz-form-control>
                  </nz-form-item>
                </td>
                <td>
                  <nz-form-item>
                    <nz-form-control nzErrorTip="请输入刻度">
                      <nz-input-number nz-input [nzMin]="0" formControlName="scale" placeholder="请输入刻度" />
                    </nz-form-control>
                  </nz-form-item>
                </td>
                <td>
                  <nz-form-item>
                    <nz-form-control nzErrorTip="可空">
                      <label nz-checkbox formControlName="nullable"></label>
                    </nz-form-control>
                  </nz-form-item>
                </td>
                <td>
                  <nz-form-item>
                    <nz-form-control nzErrorTip="请输入默认值">
                      <input nz-input formControlName="dataDefault" placeholder="请输入默认值" />
                    </nz-form-control>
                  </nz-form-item>
                </td>
                <td>
                  <span>
                    <a (click)="saveColumn(i)">确认</a>
                    <nz-divider nzType="vertical" />
                    <a nz-popconfirm nzPopconfirmTitle="是否要取消操作？" (nzOnConfirm)="cancelColumn(i)">取消</a>
                  </span>
                </td>
              </ng-container>
              <ng-template #columnEditTemplate>
                <td>{{ columns.value[i].columnName }}</td>
                <td>{{ columns.value[i].columnComment }}</td>
                <td>{{ columns.value[i].dataType }}</td>
                <td>{{ columns.value[i].length }}</td>
                <td>{{ columns.value[i].scale }}</td>
                <td>{{ columns.value[i].nullable }}</td>
                <td>{{ columns.value[i].dataDefault }}</td>
                <td>
                  <a (click)="editColumn(i)">编辑</a>
                  <nz-divider nzType="vertical" />
                  <a nz-popconfirm nzPopconfirmTitle="是否要删除此行？" (nzOnConfirm)="delColumn(i)">删除</a>
                </td>
              </ng-template>
            </tr>
          </tbody>
        </nz-table>

        <div style="display: inline">
          <span class="mt-md"> 合计字段数：{{ columns.controls.length }} </span>
          <div *ngIf="columnIndex === -1" style="float: right; margin-right: 30px" nzBlock class="mt-md">
            <button nz-button nzType="default" (click)="importFromMetaColumn(cloneMetaContent)" nzShape="round">
              <i nz-icon nzType="plus-circle"></i>克隆字段</button
            >
            <button nz-button nzType="default" (click)="addColumn()" nzShape="round"> <i nz-icon nzType="plus-circle"></i>新建字段</button>
            <button nz-button nz-dropdown nzShape="round" nzType="default" [nzDropdownMenu]="colmenu">
              新增快捷字段
              <span nz-icon nzType="down"></span>
            </button>
            <nz-dropdown-menu #colmenu="nzDropdownMenu">
              <ul nz-menu>
                <li nz-menu-item>
                  <button nz-button nzType="text" (click)="addConstColumn(0, false)">通用主键</button>
                </li>
                <li nz-menu-item>
                  <button nz-button nzType="text" (click)="addConstColumn(0, true)">自增主键</button>
                </li>
                <li nz-menu-item>
                  <button nz-button nzType="text" (click)="addConstColumn(1)">创建相关字段</button>
                </li>
                <li nz-menu-item>
                  <button nz-button nzType="text" (click)="addConstColumn(2)">最后更新字段</button>
                </li>
              </ul>
            </nz-dropdown-menu>
            <button nz-button nzType="default" (click)="clearColumn()" nzShape="round">清空字段</button>
            <a nz-button nzType="primary" (click)="saveTableInfo()"><i nz-icon nzType="save"></i>保存</a>
          </div>
        </div>

        <nz-divider nzText="约束设计" nzOrientation="left" />
        <nz-table
          formArrayName="constraints"
          nzSize="small"
          [nzData]="constraints.value"
          [nzShowPagination]="false"
          nzBordered
          nzNoResult="暂无数据"
        >
          <thead>
            <tr>
              <th nzWidth="20%" nzShowSort="true" nzShowFilter="true">约束类型</th>
              <th nzWidth="25%">约束名称</th>
              <th nzWidth="30%">字段列表</th>
              <th nzWidth="10%">自增长</th>
              <th nzWidth="15%">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of constraints.controls; let i = index" [formGroupName]="i">
              <ng-container *ngIf="constraintIndex == i; else constraintEditTemplate">
                <td>
                  <nz-form-item>
                    <nz-form-control nzErrorTip="请选择约束类型">
                      <nz-select formControlName="constraintType" name="constraintType" (ngModelChange)="constraintTypesChange($event, i)">
                        <nz-option *ngFor="let o of constraintTypes" [nzLabel]="o.value + '---' + o.name" [nzValue]="o.value" />
                      </nz-select>
                    </nz-form-control>
                  </nz-form-item>
                </td>
                <td>
                  <nz-form-item>
                    <nz-form-control nzErrorTip="请输入约束名称">
                      <input nz-input formControlName="constraintName" placeholder="请输入约束名称" />
                    </nz-form-control>
                  </nz-form-item>
                </td>
                <td>
                  <nz-form-item>
                    <nz-form-control nzErrorTip="请输入字段">
                      <nz-select formControlName="columnList" nzMode="multiple" nzAllowClear nzShowSearch nzPlaceHolder="请选择字段">
                        <nz-option *ngFor="let o of colNames" [nzLabel]="o" [nzValue]="o" />
                      </nz-select>
                    </nz-form-control>
                  </nz-form-item>
                </td>
                <td>
                  <nz-form-item>
                    <nz-form-control nzErrorTip="自增长">
                      <label nz-checkbox formControlName="pkAutoIncrement"></label>
                    </nz-form-control>
                  </nz-form-item>
                </td>
                <td>
                  <span>
                    <a (click)="saveConstraint(i)">确认</a>
                    <nz-divider nzType="vertical" />
                    <a nz-popconfirm nzPopconfirmTitle="是否要取消操作？" (nzOnConfirm)="cancelConstraint(i)">取消</a>
                  </span>
                </td>
              </ng-container>
              <ng-template #constraintEditTemplate>
                <td>{{ constraints.value[i].constraintType }}</td>
                <td>{{ constraints.value[i].constraintName }}</td>
                <td>{{ constraints.value[i].columnList }}</td>
                <td>{{ constraints.value[i].pkAutoIncrement }}</td>
                <td>
                  <a (click)="editConstraint(i)">编辑</a>
                  <nz-divider nzType="vertical" />
                  <a nz-popconfirm nzPopconfirmTitle="是否要删除此行？" (nzOnConfirm)="delConstraint(i)">删除</a>
                </td>
              </ng-template>
            </tr>
          </tbody>
        </nz-table>
        <div *ngIf="constraintIndex === -1" style="float: right; padding-bottom: 10px; margin-right: 30px" nzBlock class="mt-md">
          <button nz-button nzType="default" (click)="addConstraint()" nzShape="round">
            <i nz-icon nzType="plus-circle"></i>新增主键&索引</button
          >
          <button nz-button nzType="default" (click)="clearConstraint()" nzShape="round">清空约束</button>
        </div>
      </form>
    </div>
  </div>
</div>

<ng-template #modalContent>
  <nz-form-item> <nz-form-label nzFor="no">父节点名称</nz-form-label> {{ editedParentTitle }} </nz-form-item>
  <nz-form-item>
    <nz-form-label nzRequired nzFor="title">节点名称</nz-form-label>
    <nz-form-control>
      <input nz-input nzFocus [(ngModel)]="editedNodeTitle" name="title" />
    </nz-form-control>
  </nz-form-item>
  <!-- <nz-form-item>
    <nz-form-label nzFor="no">节点描述</nz-form-label>
    <nz-form-control>
      <input nz-input [(ngModel)]="currentNodeData.remark" name="remark" />
    </nz-form-control>
  </nz-form-item> -->
</ng-template>
<ng-template #cloneModalContent>
  <nz-form-item> <nz-form-label nzFor="no">父节点名称</nz-form-label> {{ currentNodeData.title }} </nz-form-item>
  <nz-form-item>
    <nz-form-label nzFor="no">选择目标表</nz-form-label>
    <nz-form-control>
      <nz-tree-select
        #nzTreeSelect
        style="width: 250px"
        [nzNodes]="nodeTree"
        nzShowSearch
        nzPlaceHolder="Please select"
        [(ngModel)]="selectTableId"
        (ngModelChange)="onTreeSelectChange($event)"
      />
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label nzRequired nzFor="title">新表名称</nz-form-label>
    <nz-form-control>
      <input nz-input nzFocus [(ngModel)]="newTableName" name="title" />
    </nz-form-control>
  </nz-form-item>
  <!-- <nz-form-item>
    <nz-form-label nzFor="no">节点描述</nz-form-label>
    <nz-form-control>
      <input nz-input [(ngModel)]="currentNodeData.remark" name="remark" />
    </nz-form-control>
  </nz-form-item> -->
</ng-template>
<!-- </full-content> -->

<ng-template #cloneMetaContent>
  <div nz-row>
    <nz-form-item nz-col>
      <nz-form-label nzFor="no">来源类型</nz-form-label>
      <nz-form-control>
        <nz-radio-group [(ngModel)]="metaTableType" (ngModelChange)="onMetaTableTypeChange($event)" nzButtonStyle="solid">
          <label nz-radio-button nzValue="current">当前表</label>
          <label nz-radio-button nzValue="other">其他表</label>
        </nz-radio-group>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item nz-col style="margin-left: 20px" *ngIf="metaTableType === 'other'">
      <nz-form-label nzFor="no">选择其他表</nz-form-label>
      <nz-form-control>
        <nz-tree-select
          #nzTreeSelect
          style="width: 250px"
          [nzNodes]="nodeTree"
          nzShowSearch
          nzPlaceHolder="Please select"
          [(ngModel)]="metaTableId"
          (ngModelChange)="onMetaTreeSelectChange($event)"
        />
      </nz-form-control>
    </nz-form-item>
  </div>
  <st
    #st
    [data]="metaRows"
    [loading]="metaLoading"
    [columns]="metaColumn"
    (change)="onMetaSTChange($event)"
    [size]="'small'"
    [page]="{ front: false, show: false }"
    virtualScroll
    [scroll]="{ y: '400px' }"
  />
</ng-template>

<nz-drawer
  [nzBodyStyle]="{ overflow: 'auto' }"
  [nzMaskClosable]="false"
  [nzSize]="drawerOption.size"
  [nzVisible]="drawerOption.visible"
  [nzTitle]="drawerOption.title"
  [nzFooter]="footerTpl"
  [nzExtra]="ingExtra"
  nzPlacement="right"
>
  <ng-container *nzDrawerContent>
    <ngx-codemirror
      [(ngModel)]="metaSql"
      [options]="{
        lineNumbers: true,
        theme: 'idea',
        mode: 'sql',
        height: '500',
        readOnly: false
      }"
    />
  </ng-container>
  <ng-template #ingExtra>
    <nz-select *ngIf="this.currentType == 0" style="width: 250px" [(ngModel)]="dbType" nzPlaceHolder="请选择数据库" nzAllowClear>
      <nz-option *ngFor="let item of druidDbTypes" [nzLabel]="item.label" [nzValue]="item.value" />
    </nz-select>
  </ng-template>
  <ng-template #footerTpl>
    <button style="float: left" nz-button nzType="default" (click)="sqlFormat()">格式化</button>

    <div style="float: right">
      <button nz-button nzType="default" style="margin-right: 8px" (click)="closeSqlDrawer()">关闭</button>
      <button nz-button nzType="primary" (click)="saveSqlDrawer()">导入</button>
    </div>
  </ng-template>
</nz-drawer>
